<template>
    <div class="footerContainer">
        <div class="box" @click.prevent="chooseButton1">
            <img src="../images/外卖1.svg" v-if='choose!=1'>
            <img src="../images/外卖2.svg" v-if='choose==1'>
            <p v-if='choose!=1'>外卖</p>
            <p class="font-color" v-if='choose==1'>外卖</p>
        </div>
        <div class="box" @click.prevent="chooseButton2">
            <img src="../images/搜索1.svg" v-if='choose!=2'>
            <img src="../images/搜索2.svg" v-if='choose==2'>
            <p v-if='choose!=2'>搜索</p>
            <p class="font-color" v-if='choose==2'>搜索</p>
        </div>
        <div class="box" @click.prevent="chooseButton3">
            <img src="../images/订单1.svg" v-if='choose!=3'>
            <img src="../images/订单2.svg" v-if='choose==3'>
            <p v-if="choose!=3">订单</p>
            <p class="font-color" v-if="choose==3">订单</p>
        </div>
        <div class="box" @click.prevent="chooseButton4">
            <img src="../images/个人1.svg" v-if='choose!=4'>
            <img src="../images/个人2.svg" v-if='choose==4'>
            <p v-if="choose!=4">我的</p>
            <p class="font-color" v-if="choose==4">我的</p>
        </div>
    </div>
</template>
<script>
    export default{
        data(){
            return{
                choose:0
            }
        },
        methods:{
            chooseButton1(){
                if(this.choose!=1){
                    this.choose=1;
                    this.$router.push({path:'home'});
                }
            },
            chooseButton2(){
                if(this.choose!=2){
                    this.choose=2;
                    this.$router.push({path:'/search'});
                }
            },
            chooseButton3(){
                if(this.choose!=3){
                    this.choose=3;
                    this.$router.push({path:'/order'});
                }
            },
            chooseButton4(){
                if(this.choose!=4){
                    this.choose=4;
                    this.$router.push({path:'myself'});
                }
            }
        }
    }
</script>
<style lang="scss" scoped>
    @import 'mint-ui/lib/style.css';
    @import '../style/mixin';
    .footerContainer{
        background-color: #f1f1f1;
        @include width-height(100%,3rem);
        .box{
            position: relative;
            display: inline-block;
            @include width-height(24%,3rem);
            img{
                @include center-lr;
                @include width-height(30px,30px);
            }
            p{
                @include center-lr;
                @include font-size-color(0.8rem,#666);
                margin-top:30px;
            }
            .font-color{
                @include font-size-color(0.8rem,#3b95e9);
            }
        }
    }
</style>